<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<link href="../css/SYSFrame.css" rel="stylesheet" type="text/css" />
		<link href="../font/iconfont.css" rel="stylesheet" type="text/css" />
		<link href="../css/module.css" rel="stylesheet" type="text/css" />
		<link href="../css/pages.css" rel="stylesheet" type="text/css" />
		<link href="../js/built/built-editor.css" type="text/css" rel="stylesheet">
		<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
		<script src="../js/HUpages.js" type="text/javascript"></script>
		<script src="../js/common.js" type="text/javascript"></script>
		<script src="../js/template.js" type="text/javascript"></script>
		<!--[if lt IE 9]>
          <script src="../js/html5shiv.js" type="text/javascript"></script>
          <script src="../js/css3-mediaqueries.js"  type="text/javascript"></script>
        <![endif]-->
		<script src="../js/built/built-editor.min.js"></script>
		<script>
			require(["orion/editor/edit"], function(edit) {
				edit({
					className: "editor"
				});
			});
		</script>
	</head>

	<body id="pagestyle" class="backgroundf0">
		<div class="box-module margin15">
			<div class="box-title">表单分页控件<b class="colorgreen">(依赖jquery库)</b></div>
			<div class="box-content ">
				<div class="col-lg-6 col-sm-6 height100b" id="pluginhtml">
					<div class="title-name text-left">示例代码</div>
					<div class="info_list clearfix padding15">
						<div class="Promp_plate btn-green mb15 "><b>提示：</b>该方法为前端调用方法，结合template插件模版使用，数据传输使用ajax的json模式 ， 参考广告管理栏目下的界面效果
						<span class="iconfont PrompClose">&#xe627</span>
					   </div>
						
						<pre class="editor" data-editor-lang="js">
//编辑数据
var orderlist = function(callback) {
	$.ajax({
			url: "json/products.json",
			type: "GET",
			dataType: 'json',
			success: function(ret) {
				typeof callback == 'function' && callback(ret);
		},
	});
};
//前端调用方法结合template插件使用
orderlist(function(listArr) {
$.ajax({
			url: "html/order/table.html",
			type: "GET",
			dataType: "html",
			success: function(result) {
				$('body').append("< script id='orderlisthtml' type='text/html'>" + result + "</script\>");
				var listhtml = $('#orderlist');
				var s = listArr.order.length;
				$("#quantity").html(s);
				var setTotalCount = s;
				var pagenum = 10;
				$('#Paging').paging({
					initPageNo: 1, // 初始页码
					totalPages: Math.round(setTotalCount / pagenum), //总页数
					totalCount: '合计' + setTotalCount + '条数据', // 条目总数
					slideSpeed: 600, // 缓动速度。单位毫秒
					jump: true, //是否支持跳转
					callback: function(page) {
						var currentPages = page * pagenum < s ? pagenum : s - (page - 1) * pagenum;
						var html = template('orderlisthtml', {
							page: page, //当前页数
							pagenum: pagenum, //显示数量
							pagenumber:currentPages,//页码
							order: listArr.order,
							product: listArr.data,
							status: listArr.orderstatus
						});
						listhtml.html('');
						listhtml.append(html);
						new TableSorter("tableList", 3, 4, 5, 6); //设置   
						$("#orderlisthtml").remove(); //加载完毕删除模版路径 

					} // 回调函数
				});

			}
		});	
})
	</pre>
	</pre>
 </div>
</div>
	<div class="col-lg-6 col-sm-6 height100b" id="pluginContent">
	<pre class="editor" data-editor-lang="js" data-editor-show-annotation-ruler="false" data-editor-show-overview-ruler="false" data-editor-show-folding-ruler="false">
//分页插件定义构造函数
	function Paging(el, options) {
		this.el = el;
		this.options = {
			pageNo: options.initPageNo || 1, // 初始页码
			totalPages: options.totalPages || 1, //总页数
			totalCount: options.totalCount || '', // 条目总数
			slideSpeed: options.slideSpeed || 0, // 缓动速度
			jump: options.jump || false, // 支持跳转
			callback: options.callback || function() {} // 回调函数
		};
		this.init();
	}
	// 给实例对象添加公共属性和方法
	Paging.prototype = {
		constructor: Paging,
		init: function() {
			this.createDom();
			this.bindEvents();
		},
		createDom: function() {
			var that = this,
				ulDom = '',
				jumpDom = '',
				content = '',
				liWidth = 50, // li的宽度
				totalPages = that.options.totalPages, // 总页数
				wrapLength = 0;
			totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth;
			for(var i = 1; i <= that.options.totalPages; i++) {
				i != 1 ? ulDom += '<li>' + i + '</li>' : ulDom += '<li class="sel-page">' + i + '</li>';
			}
			that.options.jump ? jumpDom = '< input type="text" placeholder="1" class="jump-text" id="jumpText">< button type="button" class="jump-button" id="jumpBtn">跳转</button>' : jumpDom = '';
			content = '< button type="button" id="firstPage" class="turnPage first-page">首页</button>' +
				'< button class="turnPage" id="prePage">上一页</button>' +
				'< div class="pageWrap" style="width:' + wrapLength + 'px">' +
				'< ul id="pageSelect" style="transition:all ' + that.options.slideSpeed + 'ms">' +
				ulDom +
				'< /ul>< /div>' +
				'< button class="turnPage" id="nextPage">下一页</button>' +
				'< button type="button" id="lastPage" class="last-page">尾页</button>' +
				jumpDom +
				'< p class="total-pages">共&nbsp;' + that.options.totalPages +'&nbsp;页</p>' +
				'< p class="total-count">' + that.options.totalCount +'< /p>';
			that.el.html(content);
},
bindEvents: function() {
			var that = this,
				pageSelect = $('#pageSelect'), // ul
				lis = pageSelect.children(), // li的集合
				liWidth = lis[0].offsetWidth, // li的宽度
				totalPages = that.options.totalPages, // 总页数
				pageIndex = that.options.pageNo, // 当前选择的页码
				distance = 0, // ul移动距离
				prePage = $('#prePage'),
				nextPage = $('#nextPage'),
				firstPage = $('#firstPage'),
				lastPage = $('#lastPage'),
				jumpBtn = $('#jumpBtn'),
				jumpText = $('#jumpText');

			prePage.on('click', function() {
				pageIndex--;
				if(pageIndex < 1) pageIndex = 1;
				handles(pageIndex);
			})

			nextPage.on('click', function() {
				pageIndex++;
				if(pageIndex > lis.length) pageIndex = lis.length;
				handles(pageIndex);
			})

			firstPage.on('click', function() {
				pageIndex = 1;
				handles(pageIndex);
			})

			lastPage.on('click', function() {
				pageIndex = totalPages;
				handles(pageIndex);
			})

			jumpBtn.on('click', function() {
				var jumpNum = parseInt(jumpText.val().replace(/\D/g, ''));
				if(jumpNum && jumpNum >= 1 && jumpNum <= totalPages) {
					pageIndex = jumpNum;
					handles(pageIndex);
					jumpText.val(jumpNum);
				}
			})

			lis.on('click', function() {
				pageIndex = $(this).index() + 1;
				handles(pageIndex);
			})

			function handles(pageIndex) {
				lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page');
				if(totalPages <= 5) {
					that.options.callback(pageIndex);
					return false;
				}
				if(pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
				if(pageIndex == 2 || pageIndex == 1) distance = 0;
				if(pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
				pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
				pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
				pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false);
				pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false);
				pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false);
				that.options.callback(pageIndex);
			}

			handles(that.options.pageNo); // 初始化页码位置
		}
	}
	$.fn.paging = function(options) {
		return new Paging($(this), options);
	}		
                	</pre>
				</div>
			</div>
		</div>
	</body>

</html>
<script>
	$(function() {
		$("#pagestyle").Hupage({
			scrollbar: function(e) {
				e.niceScroll({
					cursorcolor: "#dddddd",
					cursoropacitymax: 1,
					touchbehavior: false,
					cursorwidth: "3px",
					cursorborder: "0",
					cursorborderradius: "3px",
				});
			},
			expand: function(thisBox, settings) {
				settings.scrollbar(
					$("#pluginhtml").css({
						height: $(window).height() - $('.box-title').outerHeight() - (settings.padding * 2)
					})
				)
				settings.scrollbar(	
					$("#pluginContent").css({
						height: $(window).height() - $('.box-title').outerHeight() - (settings.padding * 2)
					})
				); //设置当前页滚动样式
			}
		})
	});
</script>